<template>
    <div class="view-login">

        <header-bar title="登录" />

        <div class="body">
            <h1>请验证手机号</h1>
            <form @submit.prevent>
                <div class="row">
                    <label>手机号</label>
                    <div class="input">
                        <input type="tel" v-model="mobile" placeholder="请输入手机号" />
                    </div>
                </div>
                <div class="row">
                    <label>验证码</label>
                    <div class="input">
                        <input type="tel" v-model="code" placeholder="请输入验证码" />
                        <button :class="{fetching:t!==0}" @click="onGetVerCode">{{t===0?'点击获取':`${t}秒后可重发`}}</button>
                    </div>
                </div>
                <div class="row">
                    <button class="submit" @click="onSubmitClick">登录</button>
                </div>
            </form>
            <small class="tips">
                未注册凹凸租车的手机号，将自动注册且<br/>代表您已同意<a>《凹凸租车会员协议》</a>
            </small>
        </div>
        
    </div>
</template>

<script>
import headerBar from '@/components/header'
import $http from '@/assets/http'
import loading from '@/components/loading'
import toast from '@/components/toast'
import alert from '@/components/alert'
import { setToken } from '@/assets/token'

export default {
    data() {
        return {
            mobile: '',
            code: '',
            t: 0,
        }
    },
    methods: {
        fetchLogin(mobile, validCode) {
            return $http.request({
                method: 'post',
                url: `/api/login`,
                params: {
                    mobile,
                    validCode
                }
            })
        },
    	async onSubmitClick() {
            this.mobile = this.mobile.trim()
            this.code = this.code.trim()

            if (this.mobile === '') {
                toast.show('手机号码不能为空')
            } else if(!(/^1[34578]\d{9}$/).test(this.mobile)){
                toast.show('请输入正确的手机号码');
            } else if (this.code === '') {
                toast.show('验证码不能为空')
            } else {
                loading.show()
                try {
                    const res = await this.fetchLogin(this.mobile, this.code)
                    await setToken(res.data.token, this.mobile)
                    this.$router.push('/')
                } catch(e) {
                    loading.hide()
                    if (e.response.data.errorMsg) {
                        toast.show(e.response.data.errorMsg)
                    } else {
                        alert.show('系统错误，请稍后再试')
                    }
                }
            }
    	},
        fetchSmsCode(mobile) {
            return $http.request({
                method: 'put',
                url: `/api/smsCode/${mobile}`,
            })
        },
    	async onGetVerCode() {
    		this.mobile = this.mobile.trim()

            if (this.mobile === '') {
                toast.show('手机号码不能为空')
            } else if(!(/^1[34578]\d{9}$/).test(this.mobile)){
                toast.show('请输入正确的手机号码')
            } else {
                loading.show()
                try {
                    const res = await this.fetchSmsCode(this.mobile)
                    toast.show('短信已发送，请注意查收'+res.data.tmpCode)
                    this.runTime(60)
                    loading.hide()
                } catch(e) {
                    loading.hide()
                    if (e.response.data.errorMsg) {
                        toast.show(e.response.data.errorMsg)
                    } else {
                        alert.show('系统错误，请稍后再试')
                    }
                }
            }
    	},
        runTime(t) {
            this.t = t
            if (t > 0) {
                setTimeout(() => {
                    this.runTime(--t)
                }, 1000)
            }
        }
    },
    watch: {
        mobile(v) {
            this.mobile = v.substr(0,11)
        },
        code(v) {
            this.code = v.substr(0,6)
        }
    },
    components: {
        headerBar
    }
}
</script>

<style scoped lang="scss">
    @import './style'
</style>